<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px;">
      <a-breadcrumb-item>考勤管理</a-breadcrumb-item>
      <a-breadcrumb-item>考勤管理</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row>
      <a-col :span="6">
        行动类型：
        <a-select placeholder="请选择行动类型">
          <a-select-option value="1">
            1
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        问题来源：
        <a-select placeholder="请选择问题来源">
          <a-select-option value="1">
            1
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        关联对象：
        <a-input placeholder="请输入关联对象"/>
      </a-col>
      <a-col :span="6">
        问题类型：
        <a-select placeholder="请选择问题类型">
          <a-select-option value="1">
            1
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="5">
        问题等级：
        <a-select placeholder="请选择问题等级">
          <a-select-option value="1">
            1
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="5">
        业务进展：
        <a-select placeholder="请选择业务进展">
          <a-select-option value="1">
            1
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="10">
        上报时间范围：
        <a-range-picker/>
      </a-col>
      <a-col :span="4">
        <a-button type="primary">
          查询
        </a-button>&emsp;&nbsp;
        <a-button>重置</a-button>
      </a-col>
    </a-row>
    <a-spin :spinning="loading">
      <a-row>
        <a-col :span="24">
          <a-table :columns="columns"
                   :data-source="tableData"
                   :scroll="{ x: 1700 }">
              <span slot="action"
                    slot-scope="text, record">
                <a class="blue"
                   @click="detailFn(text,record)">查看</a>
                  <a-divider type="vertical"/>
                <a v-hasPermi="['kqgl:edit']"
                   class="blue"
                   @click="detailFn(text,record)">修改</a>
              </span>
            <span slot="appealStatus" slot-scope="text,record">
                {{ appealStatusList[record.appealStatus] }}
              </span>
          </a-table>
        </a-col>
      </a-row>
    </a-spin>

  </div>
</template>
<script>
import {appealStatusList} from './common'

const columns = [
  {
    title: '考勤ID',
    dataIndex: 'id',
    key: 'id',
    width: 80,
  },
  {
    title: '考勤人',
    dataIndex: 'work',
    key: 'work',
    width: 100,
  },
  {
    title: '所属组织',
    dataIndex: 'ss',
    key: 'ss',
    width: 180,
  },
  {
    title: '目标考勤时间',
    dataIndex: 'zw',
    key: 'zw',
    width: 140,
  },
  {
    title: '考勤地点',
    dataIndex: 'lx',
    key: 'lx',
    width: 120,
  },
  {
    title: '最近一次打卡时间',
    dataIndex: 'qx',
    key: 'qx',
    width: 180,
  },
  {
    title: '最近一次打卡状态',
    dataIndex: 'lc',
    key: 'lc',
    width: 180,
  },
  {
    title: '当月考勤状态',
    dataIndex: 'zt',
    key: 'zt',
    scopedSlots: {customRender: 'zt'},
    width: 160,
  },
  {
    title: '考勤备注',
    dataIndex: 'fs',
    key: 'fs',
    width: 160,
  },
  {
    title: '最近考勤时间',
    dataIndex: 'time',
    key: 'time',
    width: 160,
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: {customRender: 'action'},
    fixed: 'right',
  },
]

export default {
  data() {
    return {
      tableData: [],
      columns,
      loading: false,
      appealStatusList: appealStatusList,
      queryForm: {current: 20, offset: 1},
      menuList: [
        {label: '全部', value: null},
        {label: '未审核', value: 'HERITAGE_PROTECTION'},
        {label: '审核中', value: 'OPERATION_ACCESS'},
        {label: '申诉成功', value: 'CONSERVATION_DEVELOPMENT'},
        {label: '申诉失败', value: 'CONSERVATION_DEVELOPMENT'},
        {label: '申诉超时', value: 'CONSERVATION_DEVELOPMENT'},
      ],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      const url = '/government-platform-center/kpiAppeal'
      this.$axios.get(url, this.queryForm).then((res) => {
        if (res.data.code == 0) {
          this.tableData = res.data.data
          this.total = res.data.total
          this.loading = false
        }
      })
    },
  },
}
</script>
<style scoped>
.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

/deep/ .ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/ .ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}
</style>
